<template>
  <view class="">
    <uni-nav-bar @clickLeft="$ui.back()" dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF"
      left-icon="left" status-bar title="我的订单" />
    <view class="tabs flex-row-between-center">
      <view @click="index = 1" :class="['tab', index === 1 ? 'active-tab' : '']">
        <text>全部订单</text>
        <view :class="[index === 1 ? 'slider' : 'none']"></view>
      </view>
      <view @click="index = 2" :class="['tab', index === 2 ? 'active-tab' : '']">
        <text>待付款</text>
        <view :class="[index === 2 ? 'slider' : 'none']"></view>
      </view>
      <view @click="index = 3" :class="['tab', index === 3 ? 'active-tab' : '']">
        <text>待发货</text>
        <view :class="[index === 3 ? 'slider' : 'none']"></view>
      </view>
      <view @click="index = 4" :class="['tab', index === 4 ? 'active-tab' : '']">
        <text>待收货</text>
        <view :class="[index === 4 ? 'slider' : 'none']"></view>
      </view>
      <view @click="index = 5" :class="['tab', index === 5 ? 'active-tab' : '']">
        <text>已完成</text>
        <view :class="[index === 5 ? 'slider' : 'none']"></view>
      </view>
    </view>
    <view class="">
      <div class="order_list div-sizing">
        <div v-for="(item,index) in orderList" :key="index" class="list-item"
          @click.stop="goDetail(item.id,item.order_status)">
          <div class="order-dalist">
            <div class="order-list-list">
              <span class="order-status">{{ item.order_status | fixType }}</span>
              <div class="order-list-left-img">
                <image :src="item.goods_logo" mode="" class="img-s-h"></image>
              </div>
              <div class="order-list-right">
                <div class="order-list-left-title van-multi-ellipsis--l2">
                  {{ item.goods_name }}
                </div>
              </div>
            </div>
            <div class="u-flex u-ju-between order-botton-button">
              <div class="order-botton-button-p">
                <p v-if="item.order_status>1 && item.track_number != ''">
                  快递单号:{{ item.track_number }}
                </p>
              </div>
              <div class="u-flex u-ju-between" @click.stop>
                <div class="goods-price" style="width: 300rpx;">
                  <span class="font-family-hydsj">￥：</span>
                  <span class="font-family-hydsj">{{ item.order_money }}</span>
                </div>
                <u-button shape="circle" v-if="item.order_status==0" @click="confirmPay(item.id)">
                  立即付款
                </u-button>
                <u-button shape="circle" v-if="item.order_status==1" style="background: #989898;"
                  @click="cancel_order(item.id)">
                  取消订单
                </u-button>
                <u-button shape="circle" v-if="item.order_status == 2" @click="confirm_order(item.id)">
                  确认收货
                </u-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </view>
    <view class="code_dialog u-flex u-ali-center" v-if="isDialog">
      <view class="code_dialog_box u-flex u-ju-center u-ali-center">
        <view class="" style="text-align: center;">
          请输入支付密码
        </view>
        <view class="">
          <u-code-input v-model="pay_word" :maxlength="6"></u-code-input>
        </view>
        <button @click="passwordBtn()">确认</button>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getOrderList
  } from '../../api/mine/mine.js'
  import {
    cancelOrder,
    orderComplete,
    putOrderPay
  } from '../../api/index.js'
  import md5 from '../../utils/md5.js'
  export default {
    data() {
      return {
        index: 1,
        orderList: [],
        page: 1,
        isDialog: false,
        pay_word: '',
        order_id: ''
      }
    },
    filters: {
      fixType(type) {
        type = parseInt(type)
        return type === 0 ? '待付款' : type === 1 ? '待发货' : type === 2 ? '已发货' : type === 3 ? '已完成' : '已取消'
      }
    },
    watch: {
      index(val) {
        this.page = 1
        this.orderList = []
        this.getOrderListMeth()
      }
    },
    onLoad() {
      this.getOrderListMeth()
    },
    methods: {
      // 获取我的订单列表
      getOrderListMeth() {
        this.$ui.loading('加载中')
        const vm = this
        getOrderList({
          type: vm.index - 1,
          page: vm.page
        }).then(res => {
          if (res.code === 1) {
            const _orderlist = res.data.list
            vm.orderList = [...vm.orderList, ..._orderlist]
            if (res.data.pages > vm.page) {
              vm.page++
            } else {
              vm.finished = true
            }
          } else {
            vm.error = true
          }
          uni.hideLoading()
        }, () => {})
      },
      /** 查看订单详情 */
      goDetail(id, order_status) {
        const vm = this
        setTimeout(function() {
          // 跳转到立即支付   id 订单ID status订单状态
          vm.$ui.push('/pages/shop/mall_payment?id=' + id)
        }, 150)
      },
      // 立即付款
      confirmPay(id) {
        this.pay_word = ''
        this.order_id = id
        this.isDialog = true
      },
      passwordBtn() {
        const password = md5.hex_md5(this.pay_word)
        putOrderPay({
          id: this.order_id,
          password: password
        }).then(res => {
          this.$ui.toast(res.msg)
          this.isDialog = false
        })
      },
      // 取消订单
      cancel_order(id) {
        this.$ui.show('提示', '确定取消订单吗？', true).then(res => {
          if (res.confirm) {
            cancelOrder({
              id: id
            }).then(res => {
              vm.$ui.toast(res.msg)
              vm.refreshing = true
              vm.onRefresh()
            })
          }
        })
      },
      // 确认订单
      confirm_order(id) {
        this.$ui.show('提示', '确认已收货吗？？', true).then(res => {
          if (res.confirm) {
            orderComplete({
              id: id
            }).then(res => {
              vm.$ui.toast(res.msg)
              vm.refreshing = true
              vm.onRefresh()
            })
          }
        })
      }
    }
  }
</script>

<style lang="less">
  .order_list {
    padding: 20rpx 0;

    .list-item {
      margin: auto;
      margin-bottom: 20rpx;
      border-radius: 0.2rem;
      padding: 0 30rpx 20rpx;
      background: #ffffff;
      // overflow: hidden;
      display: flex;
      flex-wrap: wrap;

      .order-list-top {
        width: 100%;
        height: 0.9rem;
        display: flex;
        overflow: hidden;
        line-height: 0.9rem;
      }

      .order-list-top>div {
        width: 50%;
      }

      .order-list-top-left {
        display: flex;
      }

      .order-list-top div+div {
        text-align: right;
        // color: #CDBD83;
      }

      .order-list-top>div>p {
        margin-left: 0.22rem;
        color: #282828;
      }

      .order-list-top>div>img {
        width: 1.92rem;
        height: 1.92rem;
        overflow: hidden;
        margin-top: 0.2rem;
      }

      .order-dalist {
        width: 100%;
        margin-top: 0.3rem;
      }

      .order-list-list {
        width: 100%;
        height: 144rpx;
        display: flex;
        position: relative;

        .order-status {
          position: absolute;
          top: 0;
          right: 0;
          color: #282828;
        }

        .order-list-left-img {
          width: 144rpx;
          height: 144rpx;
          margin-right: 20rpx;
          background: #f5f5f5;

          .img-s-h {
            width: 100%;
            height: 100%;
          }
        }

        .order-list-right {
          position: relative;

          .order-item-gui {
            position: absolute;
            bottom: 0;
            left: 0;
            color: #989898;
            font-size: 24rpx;
          }
        }

        .order-list-left-title {
          width: 300rpx;
          color: #000000;
          line-height: 40rpx;
          height: fit-content;
        }

        .order-list-left-sum {
          flex: 1;
          text-align: right;
          align-self: flex-end;
          align-items: center;
          margin-bottom: -10rpx;

          .goods-price {
            color: #333333;
            font-size: 32rpx;
          }
        }
      }

      .order-botton-p {
        text-align: right;
        font-size: 0.38rem;
      }

      .order-botton-button {
        width: 100%;
        margin-top: 24rpx;
        flex-direction: column;
        align-items: flex-start;

        .order-botton-button-p {
          color: #696969;
          margin-bottom: 10rpx;
        }

        .vant-btn {
          width: 100%;
          height: 64rpx;
          align-items: flex-end;
          justify-content: space-between;

          .goods-price {
            color: #686868;
            font-size: 24rpx;

            span:last-child {
              color: #a00000;
              font-size: 32rpx;
            }
          }

          .van-button {
            height: 64rpx;
            line-height: 64rpx;
            border-radius: 36rpx;
            width: 184rpx;
            font-size: 28rpx;
            padding: 0;
            // background: #a10000;
          }
        }
      }
    }
  }

  .code_dialog {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);

    .code_dialog_box {
      flex-wrap: wrap;
      margin: 0 auto;
      width: 80%;
      height: 400rpx;
      background-color: #fff;
      box-shadow: 0 rgba(0, 0, 0, 0.5);
      border-radius: 10rpx;
    }
  }
</style>
